<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="项目网页前端"
        ><img
          class="avatar"
         src="../../assets/avator/hanixiao.jpg"
          alt="My Avatar"
        />
        <div class="name">Hani Xiao</div>
        <div class="description">
            <el-tag  size="small" >Vue</el-tag>
            <el-tag  size="small" type="success">HTML5</el-tag>
基于 vue 和 Element UI  的植物医生后台管理系统，项目中还有ECharts图表、Day.js时钟。使用permission control增加权限控制功能，项目使用es-lint 作为代码格式检查工具，代码简洁完整易读

        </div>
        </el-tab-pane>
      <el-tab-pane label="项目后端">配置管理</el-tab-pane>
      <el-tab-pane label="项目ui">角色管理</el-tab-pane>
      <el-tab-pane label="项目android端">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
    name:'myself',
    data:{
        
    }

};
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}
.el-tag{
    margin: 2px;
}

.name {
  font-size: 30px;
  font-weight: bold;
  margin-top: 20px;
  color: #333;
  margin-left: 30px;
  padding: 20px;
}

.avatar {
  float: right;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 20px;
  margin-bottom: 20px;
}

.description {
  font-size: 18px;
  padding: 0 50px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20px;
}

.footer {
  font-size: 14px;
  color: #999;
  margin-top: 50px;
  text-align: center;
}
</style>